<template>
    <div id="blockchain">
        <section class="blockchain-banner">
            <div class="banner-content container">
                <div class="lefts">
                    <!-- 标题 -->
                    <div class="banner-title">区块链 —</div>
                    <!-- 简介 -->
                    <div class="banner-dir">时间打造的信息安全锁</div>
                </div>
                <img src="../assets/banner3.png" alt="">
            </div>
        </section>
        <div class="blockchain-goods">
            <div class="block-meddl container">
                <div class="goods-imgs">
                    <img src="../assets/block_icon.png" alt="">
                </div>
                <div class="goods-content">
                    <div class="goos-headers">
                        <h5>区块链</h5>
                        <p>Block chain</p>
                    </div>
                    <div class="goods-cont">
                        量子区块链经过发展，不仅具备多语言的智能合约、可插拔的共识算法、多重隐私保护、跨链操作等基础设施输出能力；在提高交易性能、数据处理能力，丰富开发组件等方面兼具技术性创新优势。既满足行业区块链网络的诸多商业诉求（身份、数据、隐私、权限、监管等），也能支撑公共区块链网络搭建的大众需求（去中心化、激励机制、物联网价值传递）。
                    </div>
                </div>
            </div>
        </div>
        <div class="advantage">
             <div class="advantage-headers">
                <h5>区块链优势</h5>
                <p>Block Chain Advantage</p>
            </div>
            <div class="advantage-imgs container">
                <img src="../assets/qklys.png" alt="">
            </div>
        </div>
        <div class="advantage block-cj">
             <div class="advantage-headers">
                <h5>区块链应用场景</h5>
                <p>Block Chain Application Scenario</p>
            </div>
            <div class="advantage-imgs container">
                <img src="../assets/Scenario.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'blockchain'
    }
</script>

<style lang="stylus" scoped>
@import '../static/styl/mixin.styl';
#blockchain
    .blockchain-banner
        width 100%
        height 697px
        background:linear-gradient(180deg,rgba(0,0,3,1),rgba(5,18,144,1));
        .banner-content
            display flex
            justify-content space-between
            color #fff
            img
                width 483px
                height 265px
                margin-top 282px
            .banner-title
                font-size 52px
                margin 347px auto 32px
            .banner-dir
                font-size 30px
    .blockchain-goods
        padding 65px 0 85px
        background-color #fff
        .block-meddl
            display flex
            justify-content space-around
            .goods-imgs
                width 441px
                height 332px
            .goods-content
                width 582px
                padding-top 52px
                .goos-headers
                    h5
                        font-size 22px
                        color #333
                        font-weight bold
                    p
                        margin 8px auto 34px
                        font-size 13px
                        color #666
                .goods-cont
                    font-size 16px
                    color #666
                    line-height 36px
    .advantage
        background-color #F7F8FA
        padding-bottom 152px
        .advantage-headers
            text-align center
            padding-top 122px
            h5
                font-size 42px
                color #333
            p
                margin 19px 0 116px
                font-size 16px
                color #666
    .block-cj
        background-color #fff
</style>
